<template>
  <div ref="app">
    <!-- 如果ref写在标签上 则获取的是真实DOM -->
    <button @click="getRef">获取ref</button>
    <!-- 使用组件 -->
    <!-- 如果ref书写在组件上 则获取的是组件实例 -->
    <MyHeader ref="MyHeader"></MyHeader>
    <hr />
    <MyCount></MyCount>
  </div>
</template>
<script>
//引入组件
import MyHeader from "@/components/MyHeader";
import MyCount from "@/components/MyCount";
export default {
  name: "App",
  //注册组件
  components: { MyHeader, MyCount },
  methods: {
    getRef() {
      // 通过.$refs获取ref refs是一个对象
      console.log(this.$refs.app);
      console.log(this.$refs.MyHeader);
    },
  },
};
</script>

<style></style>
